<template>
	
	<view>
		<hx-navbar  :border="false"  transparent="hidden"
			  height="140rpx" :back="false"
			>
			<view style="text-align: center;width: 100%;font-weight: 700;"><text>订单</text></view>
			
		</hx-navbar>
		<view style="background: linear-gradient(184.08deg, #DBF9F1 0%, rgba(219, 249, 241, 0) 36.82%), #FFFFFF;;height:256rpx;width: 100%;position: absolute;top: 0;"></view>
		<view class="function_box">
			<view class="topText">
				<view @click="selectfun(1)" style="position: relative;"
				>
					<!-- <image src="/static/paotui/kuaidi.png" mode="widthFix" style="width: 50%;"></image> -->
					<view class="name" :class="[{'checked': type === 1}]">外卖</view>
					<image class="borderB" v-if="type===1" src="../../static/order/borderB.png"></image>	
				
				</view>
				<view @click="selectfun(2)"  style="position: relative;"
					>
				<!-- 	<image src="/static/paotui/paotui.png" mode="widthFix" style="width: 50%;"></image> -->
					<view class="name" :class="[{'checked': type === 2}]">跑腿</view>
					<image class="borderB" v-if="type===2" src="../../static/order/borderB.png"></image>	
				
				</view>
			</view>
			<scroll-view scroll-x="true" class="scroll">
				<view class="sBox">
				<view  :class="[{'checked': currentModeIndex === 0}]"
					@tap.stop="modeSwitch(0)" v-if="type==1">
					今日
				</view>
				<view   :class="[{'checked': currentModeIndex === 1}]"
					@tap.stop="modeSwitch(1)" v-if="type==1">
					历史
				</view>
				<view   :class="[{'checked': currentModeIndex === 0}]"
					@tap.stop="modeSwitch(0)" v-if="type==2">
					未完成
				</view>
				<view  :class="[{'checked': currentModeIndex === 1}]"
					@tap.stop="modeSwitch(1)" v-if="type==2">
					已完成
				</view>
				<view >待支付</view>
				<view >配送中</view>
				<view >已完成</view>
				</view>
			</scroll-view>
		</view>
		
		
		<view v-if="type==1">
			<block v-if="currentModeIndex==0">
				<!-- 空状态 -->
				<view class="nullOrder" v-if="orderData && orderData.length == 0">
					<image src="/static/order/empty2.png" class="drinks-img"></image>
					<view class="tips" style="display: flex;flex-direction: column;align-items: center;">
						<view class="text-gray">您还没有相关订单</view>
						<view class="text-lg">可以去看看有哪些想买的</view>
					</view>
					<view class="drink-btn"></view>
					<button type="primary" class="drink-btn" size="default" @click="goIndex()">去首页逛逛</button>
					
				</view>
				<!-- --------------------------- -->
				<!-- 订单详情 -->
				<block v-for="(order, j) in orderData" :key="j" v-else>
					<view class="order-item" v-if="order">
						<view class="item-top">
							<view class="item-top-left">
								<image src="/static/tabbar/index.png" mode="aspectFill"
									style="width: 76rpx;height: 76rpx;border-radius:50%"></image>
								<view class="tit">
									<text>{{ order.storeName }}</text>
								</view>
							</view>
							<view class="item-top-right" ><text>{{getText(order)}}</text></view>
						</view>
						<!-- <view class="line">
						</view> -->
						<view class="item-center">
							<view class="item-center-left">
								<view style="white-space: nowrap;overflow: hidden;">
								<scroll-view scroll-x="true">
								<block v-for="it in order.itemImgList">
								<image :src=it mode="aspectFill" style="width: 128rpx;height: 128rpx;display: inline-block;"></image>								
								</block>
								</scroll-view>
								</view>
								<view class="rightTag"><text>共</text><text>1</text><text>件</text></view>
							</view>
							<view class="item-center-right">
								<view class="left">
								<view class="row" >
									<text style="position: relative;margin-right: 22rpx;" class="gun">订单号：{{ order.id }}</text><text>{{ order.addressname }}{{order.area}}</text>
								</view>
								<view class="row" v-if="order.oType==6">
									<text>下单信息：{{ order.name }}{{order.mobile}}</text>
								</view>
								<view class="row">
									<text>下单时间：{{ order.creatTime }}</text>
								</view>
								<!-- <view class="row">
									<text>送达时间：{{ getOrderTime(order) }}</text>
								</view> -->				
								<!-- <view class="row" v-if="order.palce==3" @click="previewImg('../../static/yidongqq.jpg')">
									<text>移动续费同学需要进群及时报备验证码哦</text>
									<image src="../../static/yidongqq.jpg" style="width: 300rpx;" mode="widthFix"></image>
								</view> -->
								<view class="row" v-if="order.oType==6" @click="previewImg('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8a632dba-9b15-44c8-b196-f1ab51407924/aa1ff868-ab96-44bd-8da8-191b825c3f95.jpg')">
									<text>请下单的同学尽快添加客服微信哦</text>
									<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8a632dba-9b15-44c8-b196-f1ab51407924/aa1ff868-ab96-44bd-8da8-191b825c3f95.jpg" style="width: 300rpx;" mode="widthFix"></image>
								</view>
								</view>
								<view class="right">
									<text>合计</text><text class="icon">￥</text><text class="money">{{ order.money }}</text>
								</view>
							</view>
						</view>
						<view class="item-bottom">
							<view class="item-bottom-btn" v-if="order.ostatus==2" @click="cancelOrder(order.id,j)">取消订单</view>
							<view class="item-bottom-btn" v-if="order.ostatus>=3&&order.ostatus<5"
								@click="refund(order.id,order.uopenid,order.storeId)">申请退款</view>
							<view class="item-bottom-btn" @click="callStore(order.storeId)">联系商家</view>
							<view class="item-bottom-btn" @click="gotoDetail(order.orderid)">查看详情</view>
						</view>
					</view>
				</block>
			</block>
			<!-- ------------------------------------ -->
			<block v-else>
				<!-- 空状态 -->
				<view class="nullOrder" v-if="historyOrderData && historyOrderData.length == 0">
					<image src="/static/order/empty2.png" class="drinks-img"></image>
					<view class="tips" style="display: flex;flex-direction: column;align-items: center;">
						<view class="text-gray">您还没有相关的订单</view>
						<view class="text-lg text-gray">可以去看看有哪些想买的~</view>
					</view>
					<view class="drink-btn"></view>
					<button type="primary" class="drink-btn" size="default" @click="goIndex()">去点餐</button>
				</view>
				<!-- 订单详情 -->
				<block v-for="(order, j) in historyOrderData" :key="j" v-else>
					<view class="order-item" v-if="order">
						<view class="item-top">
							<view class="item-top-left">
								<image src="/static/tabbar/index.png" mode="aspectFill"
									style="width: 76rpx;height: 76rpx;border-radius:50%"></image>
								<view class="tit">
									<text>{{ order.storeName }}</text>
								</view>
							</view>
							
							<view class="item-top-right" v-if="order.ostatus == 2"><text>订单未支付</text>
							</view>
							<view class="item-top-right" v-else-if="order.ostatus == 3"><text>商家已接单</text></view>
							<view class="item-top-right" v-else-if="order.ostatus == 4"><text>骑手已取到餐，正在赶往宿舍楼中</text></view>
							<view class="item-top-right" v-else-if="order.ostatus == 9"><text>餐已送到宿舍楼下，楼栋长正在送餐上楼</text></view>
							<view class="item-top-right" v-else-if="order.ostatus == 5">
								<text v-if="order.oType==5">{{getXuFeiText(order)}}</text>
								<text v-else>订单已送达</text>
							</view>
							<view class="item-top-right" v-else-if="order.ostatus == 6">
								<text>退款申请中</text>
							</view>
						</view>
						<!-- <view class="line">
				
						</view> -->
						<view class="item-center">
							<view class="item-center-left">
								<view style="white-space: nowrap;overflow: hidden;">
								<scroll-view scroll-x="true">
								<block v-for="it in order.storeImg">
								<image :src=it mode="aspectFill" style="width: 128rpx;height: 128rpx;display: inline-block;"></image>								
								</block>
								</scroll-view>
								</view>
								<view class="rightTag"><text>共</text><text>1</text><text>件</text></view>
							</view>
							<view class="item-center-right">
								<view class="row">
									<text>下单时间：{{ order.creatTime }}</text>
								</view>
								<!-- <view class="row">
									<text>送达时间：{{ getOrderTime(order) }}</text>
								</view> -->
								<view class="right">
									<text>合计</text><text class="icon">￥</text><text class="money">{{ order.money }}</text>
								</view>
							</view>
						</view>
						<view class="item-bottom">
							<!-- <view class="item-bottom-btn" v-if="order.ostatus==2" @click="cancelOrder(order.id)">取消订单</view>
							<view class="item-bottom-btn" v-if="order.ostatus>=3&&order.ostatus<5"
								@click="refund(order.id,order.uopenid,order.storeId)">申请退款</view> -->
							<view class="item-bottom-btn" @click="gotoHistoryDetail(order.orderid)">查看详情</view>
							<view class="item-bottom-btn" @click="moreOrder(order.storeId)">再来一单</view>
						</view>
					</view>
				</block>
			</block>
		</view>
		<view v-if="type==2">
			<block v-if="currentModeIndex==0">
				<!-- 空状态 -->
				<view class="nullOrder" v-if="orderData2 && orderData2.length == 0">
					<image src="/static/order/empty2.png" class="drinks-img"></image>
					<view class="tips" style="display: flex;flex-direction: column;align-items: center;">
						<view class="text-gray">您还没有相关订单</view>
						<view class="text-lg ">可以去看看有哪些想买的</view>
					</view>
					<view class="drink-btn"></view>
					<button type="primary" class="drink-btn" size="default" @click="goIndex()">去首页逛逛</button>
					<!-- <view class="text-sm" style="color: #ffa726;" @tap="goHistory">查看历史订单</view> -->
				</view>
				<!-- 订单详情 -->
				<block v-for="(order, j) in orderData2" :key="j" v-else>
					<view class="order-item" v-if="order">
						<!-- <view class="item-top">
							<view class="tit">
								<text v-if="order.dType == 1">快递代取</text>
								<text v-if="order.dType == 2">校园跑腿</text>
								<text v-if="order.dType == 3">万能任务</text>
							</view>
							<view class="" style="font-weight: bold;color: red;">
								<text v-if="order.dStatus == 3" >待接单</text>
								<text v-if="order.dStatus == 4" >已有骑手接单，待送达</text>
								<text v-if="order.dStatus == 5">骑手已完成订单，待审核送达</text>
								<text v-if="order.dStatus == 6">已结算</text>
							</view>
						</view> -->
						<view class="item-top">
							<view class="item-top-left">
								<image src="/static/tabbar/index.png" mode="aspectFill"
									style="width: 76rpx;height: 76rpx;border-radius:50%"></image>
								<view class="tit">
									<text>{{ dType[order.dType] }}</text>
								</view>
							</view>
							<view class="item-top-right" ><text>{{dStatus[order.dStatus]}}</text></view>
						</view>
						<view class="item-center">
							<view class="right">
								<view class="row" style="font-size: 30rpx;font-weight: bold">
									<text class="" style="font-size: 36rpx;">订单号：{{ order.id }}</text>
								</view>
								<view class="row" style="font-size: 40rpx;font-weight: bold">
									<text class="" style="font-size: 36rpx;">订单内容：{{ order.content }}</text>
								</view>
								<view class="row" style="font-size: 40rpx;font-weight: bold">
									<text class="" style="font-size: 36rpx;color: red;">隐藏内容：{{ order.hide }}</text>
								</view>
								<view class="row">
									<text style="font-size: 36rpx;">下单时间：{{ order.creatTime }}</text>
								</view>
								<view class="row" style="font-size: 40rpx;font-weight: bold;color: #E54D42;">
									<text>送达地址：{{order.giveaddress}}</text>
								</view>
								<view class="row">
									<text class="text-bold text-lg">电话号码：{{order.mobile}}</text>
								</view>
							</view>
						</view>
						<view class="item-bottom">
						<!-- 	<view class="login__info__item__button tn-cool-bg-color-15--reverse"
								hover-class="tn-hover" :hover-stay-time="150" 
								@click="gomobile(order.mobile)">拨号</view> -->
															<view class="login__info__item__button tn-cool-bg-color-15--reverse"
																hover-class="tn-hover" :hover-stay-time="150" 
																@click="gotoDetail(order.orderid,j)" v-if="order.dStatus>=5">送达凭证</view>
							<view class="login__info__item__button tn-cool-bg-color-15--reverse"
								hover-class="tn-hover" :hover-stay-time="150" v-if="order.dStatus>=5"
								@click="commitSuccess(order.id)">审核送达</view>
						</view>
					</view>
				</block>
			</block>
			<block v-else>
				<!-- 空状态 -->
				<view class="nullOrder" v-if="historyOrderData && historyOrderData.length == 0">
					<image src="/static/order/empty2.png" class="drinks-img"></image>
					<view class="tips" style="display: flex;flex-direction: column;align-items: center;">
						<view class="text-gray">您还没有相关的订单</view>
						<view class="text-lg text-gray">可以去看看有哪些想买的</view>
					</view>
					<view class="drink-btn"></view>
					<button type="primary" class="drink-btn" size="default" @click="goIndex()">去点餐</button>
				</view>
				<!-- 订单详情 -->
				<block v-for="(order, j) in historyOrderData" :key="j" v-else>
					<view class="order-item" v-if="order">
						<view class="item-top">
							<view class="item-top-left">
								<image src="/static/tabbar/index.png" mode="aspectFill"
									style="width: 76rpx;height: 76rpx;border-radius:50%"></image>
								<view class="tit">
									<text>{{ dType[order.dType] }}</text>
								</view>
							</view>
							<view class="item-top-right" ><text>{{dStatus[order.dStatus]}}</text></view>
						</view>
						<view class="item-center">
							<view class="right">
								<view class="row" style="font-size: 30rpx;font-weight: bold">
									<text class="" style="font-size: 36rpx;">订单号：{{ order.id }}</text>
								</view>
								<view class="row" style="font-size: 40rpx;font-weight: bold">
									<text class="" style="font-size: 36rpx;">订单内容：{{ order.content }}</text>
								</view>
								<view class="row" style="font-size: 40rpx;font-weight: bold">
									<text class="" style="font-size: 36rpx;color: red;">隐藏内容：{{ order.hide }}</text>
								</view>
								<view class="row">
									<text style="font-size: 36rpx;">下单时间：{{ order.creatTime }}</text>
								</view>
								
								<view class="row" style="font-size: 40rpx;font-weight: bold;color: #E54D42;">
									<text>送达地址：{{order.giveaddress}}</text>
								</view>
								<view class="row">
									<text class="text-bold text-lg">电话号码：{{order.mobile}}</text>
								</view>
							</view>
						</view>
						<!-- <view class="item-bottom">
							<view class="login__info__item__button tn-cool-bg-color-15--reverse"
								hover-class="tn-hover" :hover-stay-time="150" 
								@click="gomobile(order.mobile)">拨号</view>
						</view> -->
					</view>
				</block>
			</block>
		</view>
		
	</view>
</template>

<script>
	//引入全局变量
	const db = uniCloud.database();
	var app = getApp();
	var sysInfo = uni.getSystemInfoSync();
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	export default {
		data() {
			return {
				type:1,
				openid: '', //这是测试数据
				mainHeight: 0,
				statusBarHeight,
				tabs: [{
					name: '今日全部订单内容',
					data: [],
					api: '',
					load: false
				}],
				orderData: [
				],
				
				historyOrderData: [
				],
				//下拉刷新
				reloadDown: false,
				page: 0,
				nomore: false,
				// 当前选中的模式
				currentModeIndex: 0,
				// 模式选中滑块
				modeSliderStyle: {
					left: 0
				},
				// orderData2:[
				// 	{storeName:'八大碗',storeImg:["/static/order/loading.gif","/static/order/empty.gif","/static/index/xuecheindex.png","/static/index.jpg"],id:'#66756',addressname:'升华公寓4栋',area:'101',name:'张三',mobile:'12345677890',creatTime:'2022-12-16',money:'47.96',ostatus:'2'},
				// 	{storeName:'八大碗',storeImg:["/static/order/loading.gif","/static/order/empty.gif","/static/index/xuecheindex.png","/static/index.jpg","/static/order/loading.gif","/static/order/empty.gif","/static/index/xuecheindex.png","/static/index.jpg"],id:'#66756',addressname:'升华公寓4栋',area:'101',name:'张三',mobile:'12345677890',creatTime:'2022-12-16',money:'47.96',ostatus:'3'}
				// 	],
				orderData2:[],
				dType:{
						1:'快递代取',
						2:'校园跑腿',
						3:'万能任务'
					},
				dStatus:{
					3:'待接单',
					4:'已有骑手接单，待送达',
					5:'骑手已完成订单，待审核送达',
					6:'已结算'
				}
		
			};
		},
		onLoad(option) {
			this.mainHeight = sysInfo.screenHeight - statusBarHeight - 50 - 60 - 50 + 'px';
			this._freshing = false;
			this.openid="oryqr6fcWZdnLWZ6OYa1NzymSza0";
			this.initOrderList();
		},
		onShow() {
			let that = this;
			that.initOrderList();
			// this.openid="oryqr6fcWZdnLWZ6OYa1NzymSza0";
			
		},
		watch: {
			currentModeIndex(value) {
				const sliderWidth = uni.upx2px(476 / 2)
				this.modeSliderStyle.left = `${sliderWidth * value}px`
			},
		},
		methods: {
			previewImg(img){
				uni.previewImage({
					urls:[img],
					current:0
				})
			},
			getOrderTime(order){
				if(order.oSchool==1){
					//是本部校区
					switch(order.givetime){
						case "11:20~11:40":{
							return "11:25~11:45"
						}
						case "11:40~12:00":{
							return "11:45~12:05"
						}
						case "12:20~12:40":{
							return "12:25~12:45"
						}
						case "17:20~17:40":{
							return "17:25~17:45"
						}
						case "17:40~18:00":{
							return "17:45~18:05"
						}
						case "18:20~18:40":{
							return "18:25~18:45"
						}
						
					}
				}else{
					return order.givetime
				}
			},
			getXuFeiText(order){
				var text = ''
				if(order.palce==3){
					//移动
					if(order.giveTime=='7月底到期'){
						return '8月1号到账'
					}else if(order.giveTime=='8月底到期'){
						return '9月1号到账'
					}else{
						return '10月1号到账'
					}
				}
				if(order.palce==1){
					//电信
					return '话费已到账'
				}
				return text;
			},
			getText(order){
				var text = ''
				if(order.ostatus==5){
					if(order.oType==5){
						this.getXuFeiText(order)
					}else{
						return '已送达'
					}
				}
				if(order.ostatus==3){
					if(order.qStatus==1){
						text='骑手已取餐，正在配送中'
					}else{
						if(order.cStatus==1){
							text='商家已出餐，待骑手取餐'
						}else{
							text = ''
						}
					}
					// text = '骑手已送达楼下，楼栋长正配送上楼'
				}else if(order.ostatus==1){
					text = '已退款'
				}else if(order.ostatus==2){
					text = '暂未支付订单'
				}else if(order.ostatus==4){
					text = '骑手已送达楼下，楼栋长正配送上楼'
				}else{
					text = '已成功送达'
				}
				return text;
			},
			commitSuccess(id){
				uni.request({
					url:"https://zback.shixiaozhu.work/ShixiaozhuTest/pOrder/successTake?id="+Number(id),
					success(res) {
						if(res.data.status==200){
							uni.showToast({
								title:"操作成功",
								icon:'success'
							})
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'error'
							})
						}
					}
				})
			},
			selectfun(type){
				this.type = type
				if(this.type ==1 ){
					this.initOrderList();
				}else{
					this.initPaoOrder();
				}
			},
			gotoHistoryDetail(orderId){
				uni.navigateTo({
					url: 'historyorder/historyorder'+"?orderId="+orderId
				})
			},
			moreOrder(storeId){
				uni.navigateTo({
					url:"../store/index?sid="+storeId
				})
			},
			callStore(storeId){
				uni.showLoading({
					title:"正在获取联系方式..."
				})
				db.collection('storeList').where({
					'data.store_id':storeId
				}).get({getOne:true}).then((res)=>{
					uni.makePhoneCall({
						phoneNumber:res.result.data.data.telephone
					})
				})
			},
			// 切换模式
			modeSwitch(index) {
				this.currentModeIndex = index
				if(this.type ==1 ){
					this.initOrderList();
				}
			},
			cancelOrder(orderId,index) {
				let that = this
				//您是否要取消订单
				uni.showModal({
					title: "您是否要取消订单",
					success(res) {
						if (res.confirm) {
							// 发送请求
							uni.request({
								url: "https://zback.shixiaozhu.work/ShixiaozhuTest/order/cancelOrder?id=" + orderId,
								success(res) {
									if (res.data.status == 200) {
										that.orderData.splice(index,1)
										uni.showToast({
											title: "订单已取消"
										})
									}
								}
							})
						}
					}
				})
			},
			refund(orderId,openid, storeId) {
				let that = this
				//直接向后端发送请求c
				uni.showModal({
					title: "温馨提示",
					content: "订单退款需要联系商家哦，需要商家知晓并同意后，商家可以在商家端自行操作退款",
					confirmText: "联系商家",
					cancelText: "稍后再说",
					success(res) {
						if (res.confirm) {
							//给该商家拨打电话
							that.callStore(storeId)
						}
					}
				})
				// uni.request({
				// 	url: "https://zback.shixiaozhu.work/ShixiaozhuTest/exception/creatExOrder",
				// 	data: {
				// 		"orderid": orderId,
				// 		"type": 1,
				// 		"oStatus": 2,
				// 		"openid":openid
				// 	},
				// 	success(res) {
				// 		if (res.data.status == 200) {
				// 			uni.showModal({
				// 				title: "申请成功",
				// 				content: "您的退款申请已经发给商家，建议您直接拨打电话与商家沟通退款，您也可以在【我的-退款记录】里查看您的退款进度",
				// 				confirmText: "联系商家",
				// 				cancelText: "稍后再说",
				// 				success(res) {
				// 					if (res.confirm) {
				// 						//给该商家拨打电话
				// 						uni.makePhoneCall({
				// 							phoneNumber: storeId
				// 						})
				// 					}
				// 				}
				// 			})
				// 		}
				// 	}
				// })
			},
			gotoDetail(orderid) {
				uni.navigateTo({
					url: "orderDetail/orderDetail?orderId=" + orderid
				})
			},
			getGift(sn){
				if(sn=="1"){
					return "恭喜您抽到了中南大学卡套"
				}else if(sn=="2"){
					return "恭喜您抽到了中南大学流沙摆件"
				}else if(sn=="3"){
					return "恭喜您抽到了中南大学签字笔"
				}else{
					return "恭喜您抽到了中南大学戒指"
				}
			},
			//初始请求
			initOrderList() {
				let that = this;
				uni.showLoading({
					title: '正在请求订单数据...'
				});
				//测试
				// that.openid = "oryqr6fcWZdnLWZ6OYa1NzymSza0"
				
				if (that.openid == '') {
					// 登陆验证！！！
					that.checkLogin();
				} else {
					if(this.currentModeIndex==0){
						uni.request({
							url: "https://zback.shixiaozhu.work/ShixiaozhuTest/order/getOrder?openid=" + this.openid,
							success(res) {
								if (res.data.status == 200) {
									console.log("获取到的数据", res)
									that.orderData = res.data.data
									uni.hideLoading()
								}else{
									that.orderData = []
									uni.hideLoading()
								}
							}
						})
					}else{
						uni.request({
							url: "https://zback.shixiaozhu.work/ShixiaozhuTest/historyOrder/getOrder?openid=" + this.openid,
							success(res) {
								if (res.data.status == 200) {
									console.log("获取到的数据", res)
									that.historyOrderData = res.data.data
									uni.hideLoading()
								}else{
									that.historyOrderData = []
									//没有订单
									uni.hideLoading()
								}
							}
						})
					}
				}
			},
			initPaoOrder(){
				let that = this;
				uni.showLoading({
					title: '正在请求订单数据...'
				});
				if (that.openid == '') {
					// 登陆验证！！！
					that.checkLogin();
				} else {
					if(this.currentModeIndex==0){
						uni.request({
							url: "https://zback.shixiaozhu.work/ShixiaozhuTest/pOrder/getOrderBySelf?openid=" + this.openid,
							success(res) {
								if (res.data.status == 200) {
									console.log("获取到的数据", res)
									that.orderData2 = res.data.data.worder
									that.historyOrderData2 = res.data.data.yorder
									uni.hideLoading()
								}else{
									that.orderData2 = []
									uni.hideLoading()
								}
							}
						})
					}
				}
			},
			//登陆验证
			checkLogin() {
				let that =this
				uni.getStorage({
					key: 'user_sxz',
					success: function(res) {
						that.openid = res.data.openid;
						that.userinfo = res.data.info;
						that.initOrderList()
					},
					fail() {
						// console.log('获取本地缓存失败！')
						uni.hideLoading();
						//那么就要去引导用户进行登陆了
						uni.showModal({
							title: '您还没有绑定微信登陆，是否要现在进行绑定？',
							success(res) {
								if (res.confirm) {
									//用户选择了登陆，直接跳转到登陆界面
									uni.switchTab({
										url: '../me/me'
									});
								}
							}
						});
					}
				});
			},
			
			//确认订单
			commitOrder(number, id) {
				let that = this;
				db.collection('order')
					.doc(id)
					.update({
						data: {
							status: 5
						}
					})
					.then(res => {
						console.log('订单数据', res);
						that.tabs[2].data.splice(number, 1);
						// 全部订单 index为0
						db.collection('order')
							.where({
								'data._openid': that.openid
							})
							.get({})
							.then(res => {
								console.log('订单数据', res);
								that.orderData = res.result.data;
								that.tabs[0].data = that.orderData;
								this.swiperChange(3);
							});
					});
			},
			//去支付
			goPay(orderId) {
				uni.redirectTo({
					url: '/pages/order/pay?id=' + orderId
				});
			},
			//去门店
			goStore(storeId) {
				console.log(storeId);
				uni.redirectTo({
					url: '/pages/store/index?sid=' + storeId
				});
			},
			//去点餐
			goIndex() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			goHistory() {
				uni.navigateTo({
					url: 'historyorder/historyorder'
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f3f4f6;
	}
	
	.login__info__item__button {
		width: 180rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.login {
		position: relative;
		height: 100%;
		z-index: 1;
	
		/* 内容 start */
		&__wrapper {
			padding-top: 120rpx;
			width: 100%;
		}
	
		/* 切换 start */
		&__mode {
			position: relative;
			margin: 0 auto;
			width: 476rpx;
			height: 77rpx;
			background-color: rgba(255, 255, 255, 0.2);
			backdrop-filter: blur(6rpx);
			-webkit-backdrop-filter: blur(6rpx);
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
			border-radius: 39rpx;
	
			&__item {
				height: 77rpx;
				width: 100%;
				line-height: 77rpx;
				text-align: center;
				font-size: 31rpx;
				color: #000000;
				font-weight: bold;
				letter-spacing: 1em;
				text-indent: 1em;
				z-index: 2;
				transition: all 0.4s;
	
				&--active {
					font-weight: bold;
					color: #FFFFFF;
				}
			}
	
			&__slider {
				position: absolute;
				height: inherit;
				width: calc(476rpx / 2);
				border-radius: inherit;
				box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
				z-index: 1;
				transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
			}
		}
	}
	
	

	.nullOrder {
		width: 100%;
		height: 80vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
			background-color: #F3F4F6;
		
		image {
			width: 566rpx;
			height: 400rpx;
		}

		.tit {
			display: flex;
			flex-direction: column;
			font-size: 32rpx;
			font-weight: bold;
			color: #555;
			margin-top: 12rpx;
		}

		.drinks-img {
			width: 204rpx;
			height: 170rpx;
		}

		.tips {
			margin: 60rpx 0 10rpx;
			line-height: 48rpx;
			.text-gray{
				font-size: 30rpx;
				font-weight: 700;
				color: #000;
				letter-spacing: 4rpx;
			}
			.text-lg{
				font-size: 20rpx;
				color: #a9a9a9;
				
			}
		}

		.drink-btn {
			width: 320rpx;
			background: linear-gradient(111.77deg, #FC9A8D 56.92%, #FDDBB4 109.99%);
			border-radius: 20rpx;
			margin-bottom: 40rpx;
			font-size: 32rpx;
			line-height: 3;
		}
	}

	.order-item {
		display: flex;
		flex-flow: column;
		justify-content: center;
		background: linear-gradient(209.15deg, rgba(219, 249, 241, 0.2) 1.81%, rgba(219, 249, 241, 0) 22.2%), #FFFFFF;
		box-shadow: 0px 8rpx 12rpx rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		margin: 24rpx;
		margin-top: 30rpx;
		padding: 16rpx;
	}

	.item-top {
		display: flex;
		justify-content: space-between;
	}

	.item-top-left {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tit {
		font-size: 24rpx;
		font-weight: 700;
		margin-left: 24rpx;
		margin-top: -40rpx;
	}

	.item-top-right {
		font-size: 24rpx;
		color: rgba(158, 158, 158, 1);
		margin-top: 14rpx;
	}

	.line {
		align-self: center;
		margin-top: 10rpx;
		width: 95%;
		height: 1rpx;
		background-color: #DCDCDC;
	}

	.item-center {
		display: flex;
		// justify-content: flex-start;
		flex-direction: column;
		margin-top: 22rpx;
		// align-items: center;
		.item-center-left{
			display: flex;
			// justify-content:space-between;
			align-items: center;
			image{		
			border-radius: 8rpx;
			margin-right: 20rpx;
			position: relative;
			}
		}
	}
	.gun::after{
		content: '';
		position: absolute;
		right: -22rpx;
		top: 2rpx;
		width: 2rpx;
		height: 14rpx;
		margin: 0 10rpx;
		background-color: rgba(186, 186, 186, 1);
	}
	.rightTag{
		font-size: 20rpx;display: flex;flex-direction: column;align-items: center;color: rgba(173, 173, 173, 1);
		position: absolute;
		right: 38rpx;
		background-color: rgba(255, 255, 255, 0.6);
		height: 140rpx;
		justify-content: center;
		width: 40rpx;
		font-weight: 700;
	}
	.item-center-right {
		margin-left: 10rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		.row{
			font-size: 18rpx;
			color: rgba(154, 154, 154, 1);
			font-weight: 400;
			margin-bottom: 8rpx;
		}
		.right{
			// padding-top: ;
			margin-bottom: 8rpx;
			text{
				font-size: 20rpx;
				color: rgba(158, 158, 158, 1);
				font-weight: 700;
			}
			.icon{
				font-size: 16rpx;
				font-weight: 900;
				color:#000;
				margin-left: 6rpx;
				
			}
			.money{
				font-size: 28rpx;
				font-weight: 900;
				color:#000
			}
		}
	}

	.item-bottom {
		margin-top: 20rpx;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-end;
	}

	.item-bottom-btn {
		background: #F3F4F6;
		border-radius: 14rpx;
		width: 156rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 24rpx;
		color: rgba(85, 85, 86, 1);
		font-weight: 700;
		margin-left: 20rpx;
	}
	.item-bottom-btn:last-child{
		background: linear-gradient(111.77deg, #FC9A8D 56.92%, #FDDBB4 109.99%);
		color: #fff;
	} 
	.function_box{
		position: relative;
		width: 100%;
		height: 200rpx;
		background: linear-gradient(0deg, rgba(219, 249, 241, 0), rgba(219, 249, 241, 0)), #FFFFFF;
		// box-shadow: 0px 4rpx 12rpx  rgba(0, 0, 0, 0.1);
		box-shadow:0px 8rpx 12rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		.topText{
			position: absolute;
			bottom: 100rpx;
			display: flex;
			flex-direction: row;
			.name{
				font-size: 32rpx;
				font-weight: 700;
				color: #595959;
				margin-left: 56rpx;
				padding:30rpx  20rpx;
				
				border-radius: 50%;
			}
			.checked{
				background: radial-gradient(71.58% 57.88% at 50% 58.11%, #C6FAE4 0%, rgba(217, 217, 217, 0) 100%);
			}
			.borderB{
				position: absolute;
				width: 44rpx;
				height: 14rpx;
				bottom: -4rpx;
				left: 86rpx;
			}
		}
		.scroll{
			position: absolute;
			bottom: 18rpx;
			margin-left: 26rpx;
			white-space: nowrap;
			
			.sBox{
				display: flex;
				flex-direction: row;
				view{
					font-size: 24rpx;
					color: #555556;
					// width: 200rpx;
					padding: 16rpx 54rpx;
					background-color: #F3F4F6;
					border-radius: 14rpx;
					margin-right: 26rpx;
					
				}
				.checked{
					background: linear-gradient(111.77deg, #FC9A8D 56.92%, #FDDBB4 109.99%);
					color: #fff;
				}
			}
		}
	}
</style>
